<template>
  <div style="width: 100%;display: flex;flex-direction: column;">
    <div ref="printDiv" id="printYearid" class="bgyearly">
      <img src="@/assets/imgs/zxbg2.jpg" style="width: 92%;height: 710px;margin-left: 4%;">
      <div style="position: absolute;top: 100px;width: 72%;margin-left: 11%;">
        <div style="text-align: center;font-size: 22px;font-weight:bold;line-height: 60px;">
          {{yearApprove.examineYear}}年度社会组织年检合格证明
        </div>
        <div style="font-size: 16px;font-weight:bold;line-height: 50px;text-align: center;">
          单位名称：{{ userName }}
        </div>
        <div style="border: 1px solid #b2aaaa;text-align: center;padding-top: 30px;padding-bottom: 60px;display: flex;flex-direction: row;align-items: center;justify-content: center;">
          <div style="color: #8c191d;font-size: 26px;font-weight: bold;margin-top: 10px;">年检结论：</div>
          <div class="div-status">{{yearApprove.approveStatus == 1? '合格':yearApprove.approveStatus == 2? '基本合格':yearApprove.approveStatus == null?'未知':'不合格'}}</div>
<!--          <el-image style="width: 135px;height: 50px;margin-top: 15px;margin-left: 10px;" :src="yearApprove.approveStatus == 1?img1:yearApprove.approveStatus == 2?img2:img3"></el-image>-->
        </div>
        <div
          style="border-right: 1px solid #b2aaaa;border-bottom: 1px solid #b2aaaa;border-left: 1px solid #b2aaaa;text-align: right;padding-top: 30px;">
          <!--            <img style="width: 130px;height: 130px;margin-right: 20px;margin-top: 10px;" src="@/assets/imgs/mzj.png" />-->
          <p style="text-align: right;font-size: 16px;font-weight:bold;margin-right: 35px;margin-top: 120px;">
            云阳县民政局</p>
          <p style="text-align: right;font-size: 16px;font-weight:bold;margin-right: 40px;margin-top: 10px;margin-bottom: 15px;">
            <span v-if="yearApprove.lastModifiedTs">{{ yearApprove.lastModifiedTs }}</span>
            <span v-else="yearApprove.createdTs">{{ (yearApprove.createdTs).substring(0, 10) }}</span>
          </p>
        </div>
      </div>
    </div>
    <el-row>
      <el-col :span="24" style="text-align: center;">
        <el-button type="primary" style="margin-top: 20px;width: 150px;" @click="downYearly()">盖章并下载</el-button>
      </el-col>
    </el-row>
    <iframe ref="printIframe" frameborder="0" scrolling="no" style="margin: 0px;padding: 0px;display: none;"></iframe>
  </div>
</template>

<script>

import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
import { ElLoading } from 'element-plus'
import { downSealSignPdf, getSealSignPdf } from '@/views/yearCheck/ykb/otherApi'
import { useUserStore } from '@/store'
import { saveAs } from 'file-saver'
import db from '@/storage'
import { wrapperLoadViteEnv } from '~/build/utils'
import img1 from '@/assets/imgs/njhg1.png';
import img2 from '@/assets/imgs/njhg2.png';
import img3 from '@/assets/imgs/njhg3.png';
export default {
  setup() {
    return {
      img1,
      img2,
      img3
    }
  },
  data() {
    return {
      yearApprove: this.yearApprove,
      userInfo: undefined,
      userName: '',
      yearSeal: {
        orgId: '',
        orgName: '',
        personContact: '18996663938',
        sealPassword: '110551201',
        fileType: 'png',
        fileWidth: undefined,
        fileHeight: undefined,
        base64Str: undefined,
        fileTitle: '年检结果',
        sealPositionSize: '1',
        purposeText: '社会组织年检结果盖章',
        fileSubject: '社会组织年检结果盖章',
        expireTime: '',
        endTime: '',
        page: '0',
        offsetX: '0.64',
        offsetY: '0.37'
      },
    }
  },
  created() {
    const userStore = useUserStore()
    this.userInfo = userStore.userInfo
  },
  methods: {
    downYearly() {
      const content = document.getElementById('printYearid')
      const pdf = new jsPDF()
      html2canvas(content, { scale: 1, fontScale: 1 }).then(canvas => {
        const imgData = canvas.toDataURL('image/png')
        console.log(imgData)
        const loading = ElLoading.service({
          lock: true,
          text: '请稍后...',
          background: 'rgba(0, 0, 0, 0.6)'
        })
        this.yearSeal.base64Str = imgData
        this.yearSeal.orgId = this.userInfo.workNo
        this.yearSeal.orgName = this.userInfo.userName
        //章的有效时间
        this.yearSeal.endTime = Number(this.yearApprove.examineYear) + 10 + '-12-31'
        // this.yearSeal.expireTime = this.yearApprove.lastModifiedTs
        this.yearSeal.expireTime = Number(this.yearApprove.examineYear) + 10 + '-12-31'
        getSealSignPdf(this.yearSeal).then(res => {
          loading.close()
          console.log(res)
          this.getYearlyPdf(res.msg);
        }).catch((error) => {
          loading.close()
        })
      })

      // let html = this.$refs.printDiv.innerHTML
      // let printIframe = this.$refs.printIframe
      // printIframe.setAttribute('srcdoc', html)
      // printIframe.onload = function() {
      //   console.log(printIframe.contentWindow)
      //   // 去掉iframe里面的dom的body的padding margin的默认数值
      //   printIframe.contentWindow.document.body.style.padding = '0px'
      //   printIframe.contentWindow.document.body.style.margin = '0px'
      //   // 开始打印
      //   printIframe.contentWindow.focus()
      //   printIframe.contentWindow.print()
      // }

      // const element = document.querySelector('#printYearid');
      // html2canvas(element).then((canvas) => {
      //   let img = new Image();
      //   img.src = canvas.toDataURL('image/png');
      //   let link = document.createElement('a');
      //   link.href = img.src;
      //   link.download = '年检结论.png';
      //   link.click();
      // });
    },

    getYearlyPdf(contractId) {
      let param = { contractId: contractId }
      const viteEnv = wrapperLoadViteEnv(import.meta.env)
      axios({
        method: 'post',
        url: viteEnv.VITE_BASE_URL_API + 'hbsys-system/sorg/seal/download',
        headers: {
          Authorization: 'Bearer ' + db.get('token')
        },
        responseType: 'blob',
        data: param
      }).then((res) => {
          const blob = new Blob([res.data], { type: 'application/zip,charset=utf-8' })
          const zipUrl = URL.createObjectURL(blob) // 创建Blob URL
          saveAs(zipUrl, '年检结果.zip')
        }, (err) => {
          this.$message({
            message: '下载失败，请联系工作人员！',
            type: 'error'
          })
          console.log(err)
        }
      )
    }
  },

  props: {
    yearApprove: {
      type: Object,
      default: {}
    },
    userName: {
      type: String,
      default: '组织名称'
    }
  }
}
</script>
<style scoped lang="scss">
.bgyearly {
  background-size: cover;
  width: 100%;
  box-sizing: border-box;
}

.div-status{
  color: #8C191D;
  box-sizing: border-box;
  padding: 4px 15px 5px 15px;
  font-size: 24px;
  font-weight: bold;
  border: 4px solid #8C191D;
  border-radius: 6px;
  margin-top: 5px;
}
</style>
